<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn flat
               dense
               round
               icon="menu"
               aria-label="Menu"
               @click="toggleLeftDrawer"/>

        <q-toolbar-title>
          {{ 'Xray Timetables' }}
        </q-toolbar-title>

       <log-out-button />

      </q-toolbar>
    </q-header>

    <q-drawer v-model="leftDrawerOpen"
              show-if-above
              bordered>
      <q-list>
        <NavigationLink v-for="link in linksList"
                        :key="link.title"
                        v-bind="link"/>
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref } from 'vue'
import NavigationLink from 'components/NavigationLink.vue'
import LogOutButton from "components/LogOutButton.vue";

defineOptions({
  name: 'MainLayout'
})

const linksList = [
  {
    title: 'Мой профиль',
    icon: 'account_circle',
    link: '/my-profile'
  },
  {
    title: 'Расписания',
    icon: 'view_quilt',
    link: '/manage-schedules',
    permission: 'can_manage_timetables'
  },
  {
    title: 'Врачи',
    icon: 'people',
    link: '/doctors',
    permission: 'can_manage_users'
  },
  {
    title: 'Управление специализациями',
    icon: 'clear_all',
    link: '/modalities',
    permission: 'can_manage_users'
  },
  {
    title: 'Мое расписание',
    icon: 'calendar_today',
    link: '/my-timetable'
  },
  {
    title: 'Расписания исследований',
    icon: 'medication',
    link: '/study-plans'
  },
]

const leftDrawerOpen = ref(false)

function toggleLeftDrawer () {
  leftDrawerOpen.value = !leftDrawerOpen.value
}
</script>
